import React from 'react';
import {
  Box,
  Typography,
  Paper,
  Chip,
  Divider,
  Alert,
} from '@mui/material';
import { Implementation } from '../../types';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';

interface ImplementationDetailProps {
  implementation: Implementation;
}

const ImplementationDetail: React.FC<ImplementationDetailProps> = ({
  implementation,
}) => {
  return (
    <Box>
      {/* 标题和描述 */}
      <Typography variant="h4" gutterBottom>
        {implementation.title}
      </Typography>
      <Typography variant="subtitle1" color="text.secondary" paragraph>
        {implementation.description}
      </Typography>

      {/* 标签和难度 */}
      <Box sx={{ mb: 3, display: 'flex', gap: 1, flexWrap: 'wrap' }}>
        {implementation.tags.map((tag) => (
          <Chip key={tag} label={tag} size="small" />
        ))}
        <Chip
          label={implementation.difficulty}
          size="small"
          color={
            implementation.difficulty === '初级'
              ? 'success'
              : implementation.difficulty === '中级'
              ? 'warning'
              : 'error'
          }
        />
      </Box>

      <Divider sx={{ my: 3 }} />

      {/* 概述 */}
      <Typography variant="h5" gutterBottom>
        功能概述
      </Typography>
      <Typography paragraph>{implementation.content.overview}</Typography>

      {/* 实现思路 */}
      <Typography variant="h5" gutterBottom>
        实现思路
      </Typography>
      <Typography
        component="div"
        sx={{ whiteSpace: 'pre-line' }}
        paragraph
      >
        {implementation.content.implementation}
      </Typography>

      {/* 代码块 */}
      <Typography variant="h5" gutterBottom>
        代码实现
      </Typography>
      {implementation.content.codeBlocks.map((block, index) => (
        <Box key={index} sx={{ mb: 3 }}>
          <Typography variant="subtitle2" gutterBottom>
            {block.description}
          </Typography>
          <Paper elevation={3} sx={{ overflow: 'hidden' }}>
            <SyntaxHighlighter
              language={block.language}
              style={vscDarkPlus}
              customStyle={{
                margin: 0,
                padding: '16px',
                borderRadius: '4px',
              }}
            >
              {block.code}
            </SyntaxHighlighter>
          </Paper>
        </Box>
      ))}

      {/* 注意事项 */}
      <Typography variant="h5" gutterBottom>
        注意事项
      </Typography>
      <Alert severity="info" sx={{ mb: 3 }}>
        <Typography
          component="div"
          sx={{ whiteSpace: 'pre-line' }}
        >
          {implementation.content.notes}
        </Typography>
      </Alert>

      {/* 演示 */}
      {implementation.content.demo && (
        <>
          <Typography variant="h5" gutterBottom>
            效果演示
          </Typography>
          <Box sx={{ mb: 3 }}>
            {implementation.content.demo.type === 'image' && (
              <img
                src={implementation.content.demo.url}
                alt="演示"
                style={{
                  maxWidth: '100%',
                  height: 'auto',
                  borderRadius: '4px',
                }}
              />
            )}
          </Box>
        </>
      )}

      {/* 元数据 */}
      <Box sx={{ mt: 4, color: 'text.secondary', fontSize: '0.875rem' }}>
        <Typography variant="caption" display="block">
          创建时间：{new Date(implementation.metadata.createTime).toLocaleString()}
        </Typography>
        <Typography variant="caption" display="block">
          最后更新：{new Date(implementation.metadata.updateTime).toLocaleString()}
        </Typography>
        <Typography variant="caption" display="block">
          版本：{implementation.metadata.version}
        </Typography>
      </Box>
    </Box>
  );
};

export default ImplementationDetail;
